<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1:html插值</h1>
        <h3>可以动态的渲染DOM节点,常用来处理开发者不可预知的或难以控制的DOM结构
            注意:在网页上动态渲染html是比较危险的,容易造成漏洞被黑客攻击
        </h3>
        <span v-html="vh"></span>
        <h1>知识点2:v-pre</h1>
        <h3>1.它可以使代码所在节点跳过编译 2.可以利用它跳过没有指令语法的节点,可以加快速度</h3>
        <p>例子</p>
        <span v-pre>{{price}}</span>
        <h1>知识点3:v-bind属性绑定</h1>
        <h3>1.文本插值不能在html属性中使用,如果我们想要动态地调整属性,就需要使用v-bind进行绑定</h3>
        <p>没有使用v-bind</p>
        <p title="title">没有进行属性绑定</p>
        <p>使用v-bind</p>
        <p v-bind:title="title">进行属性绑定</p>
        <h3>2. v-bind可以省略为 : </h3>
        <p :title="title">省略</p>
        <h3>3. 属性也可以绑定变量、表达式、执行函数等。注意最后的结果要符合属性的自身要求</h3>
        <p>例子1:绑定变量和表达式</p>
        <button :disabled=false>click</button>
        <input type="text" :placeholder="false?'请输入':'请录入'">
        <p>例子2:图片的动态绑定</p>
        <img :src="src" alt="">
        <h3>课堂实例:通过改变type值实现文本框单选框和多选框的切换</h3>
        <input :type="type" id="123">123<br>
        <button @click="type='text'">文本框</button>
        <button @click="type='radio'">单选框</button>
        <button @click="type='checkbox'">多选框</button>
        <h3>通过动态改变属性,完成字体大小和颜色的改变</h3>
        <span :style="style">123</span>
        <button @click="style='color:green;fontSize:16px;'">111</button>
        <button @click="style='color:red;fontSize:18px;'">111</button>
    </div>
</body>
</html>
<script>
    const appConn=Vue.createApp({
        data() {
            return {
                vh:"<span>动态生成的html代码</span>",
                price:10000,
                title:'123456789',
                src:"./image.png",
                type:"checkbox"
            }
        },
    }).mount("#app")
</script>